<template>
  <div class="stepBar">
    <div class="goNext" v-show="initial != 0" @click="goPrev">
      <a-icon type="left" />
    </div>
    <a-steps :current="currentStep" size="small" :initial="initial" :style="{'--max-width': stepMaxWidth}">
      <a-step
        :class="
          item.delayStatus
            ? {
                redTime: item.delayStatus === 'RED',
                greenTime: item.delayStatus === 'GREEN',
                yellowTime: item.delayStatus === 'YELLOW',
                grayTime: item.delayStatus === 'UNAVAILABLE'
              }
            : ''
        "
        v-for="(item, index) in viewStepArr"
        :key="index"
      >
        <template slot="title">
         <!-- 判断已完成-->
          <a-popover placement="bottomLeft" v-if="item.children && item.actualEndTime !==''">
            <template slot="content">
              <process :processList="item.children" :isActive="isActive" :navTitle="item.name"></process>
            </template>
            <a-tooltip >
              <template slot="title">
                 {{ item.name }}
              </template>
              <span class="titleText">
                {{ item.name }}
              </span>
            </a-tooltip>
            
          </a-popover>
          <!-- 判断进行中-->
          <a-popover placement="bottomLeft" v-if="item.children && item.processing === 'true' ">
            <template slot="content">
              <process :processList="item.children" :isActive="isActive1" :navTitle="item.name"></process>
            </template>
            <a-tooltip >
              <template slot="title">
                 {{ item.name }}
              </template>
              <span class="titleText">
                {{ item.name }}
              </span>
            </a-tooltip>
          </a-popover>
           <!-- 判断还未进行-->
          <a-popover placement="bottomLeft" v-if="item.children && item.processing === 'false'  && item.actualEndTime ===''">
            <template slot="content">
              <process :processList="item.children" :isActive="isActive" :navTitle="item.name"></process>
            </template>
            <a-tooltip >
              <template slot="title">
                 {{ item.name }}
              </template>
              <span class="titleText">
                {{ item.name }}
              </span>
            </a-tooltip>
          </a-popover>
           <a-tooltip >
              <template slot="title">
                 {{ item.name }}
              </template>
              <span v-if="!item.children" class="noPopTitle" >
                {{ item.name }}</span>
            </a-tooltip>
        </template>
        <template slot="icon" v-if="stepList[currentStep].name === item.name">
            <span class="textIcon">
              {{ currentStep + 1 }}
            </span>
        </template>
        <div slot="description">
          <span>计划: {{ item.targrtEndTime }}</span
          ><br />
          <span v-if="item.actualEndTime" class="overTime"
            >实际: {{ item.actualEndTime }}</span
          >
        </div>
      </a-step>
    </a-steps>
    <div class="goNext" v-show="isNextBtnShow" @click="goNext">
      <a-icon type="right" style="line-height:40px;" />
    </div>
  </div>
</template>
<script>
import process from "@/components/singlePage/process.vue";
export default {
  components: { process },
  name: "stepBar",
  props: {
    stepList: {
      type: Array,
      default: () => []
    },
    stepMaxWidth: {
      type: String,
      default: "280px"
    }
  },
  data() {
    return {
      viewStepArr: [],
      actualTime: [],
      initial: 0,
      isNextBtnShow: false,
      isActive: true,
      isActive1: false,
    };
  },
  computed: {
    currentStep: function() {
      if(this.stepList.length === this.filterActualTime(this.stepList)){
        return 0
      }else{
        return this.filterActualTime(this.stepList);
      }
     
    }
  },
  watch: {
    // stepList: {
    //   handler(n) {
    //     this.getNowStep(n);
    //   }
    // }
    stepList(val, oldVal) {
      this.getNowStep(val);
    }
  },
  mounted() {
    // this.setSplitArr(this.stepList, 6)
    this.getNowStep(this.stepList);
  },
  methods: {
    goNext() {
      let nowIndex = null;
      // 取当前展示的数组的最后一个数据，判断这个数据在原数组哪个索引下
      let nowFisishData = this.viewStepArr[this.viewStepArr.length - 1];
      this.stepList.forEach((e, i) => {
        if (e.name === nowFisishData.name) {
          nowIndex = i;
        }
      });
      // 根据当前展示数据的所反馈的索引，判断点击，刷新展示数据
      if (nowIndex == 5) {
        if (this.stepList.length / 6 > 2) {
          this.viewStepArr = this.stepList.slice(6, 12);
        } else {
          this.viewStepArr = this.stepList.slice(6, this.stepList.length);
        }
        // 判断当前的数据长度
        if (this.stepList.length > 12) {
          this.isNextBtnShow = true;
        } else {
          this.isNextBtnShow = false;
        }
      } else if (nowIndex == 11) {
        if (this.stepList.length / 6 > 3) {
          this.viewStepArr = this.stepList.slice(12, 18);
        } else {
          this.viewStepArr = this.stepList.slice(12, this.stepList.length);
        }
        // 判断当前的数据长度
        if (this.stepList.length > 18) {
          this.isNextBtnShow = true;
        } else {
          this.isNextBtnShow = false;
        }
      } else if (nowIndex == 17) {
        if (this.stepList.length / 6 > 4) {
          this.viewStepArr = this.stepList.slice(18, 24);
        } else {
          this.viewStepArr = this.stepList.slice(18, this.stepList.length);
        }
        // 判断当前的数据长度
        if (this.stepList.length > 24) {
          this.isNextBtnShow = true;
        } else {
          this.isNextBtnShow = false;
        }
      } else if (nowIndex == 23) {
        if (this.stepList.length / 6 > 5) {
          this.viewStepArr = this.stepList.slice(24, 30);
        } else {
          this.viewStepArr = this.stepList.slice(24, this.stepList.length);
        }
        // 判断当前的数据长度
        if (this.stepList.length > 30) {
          this.isNextBtnShow = true;
        } else {
          this.isNextBtnShow = false;
        }
      }
      // 改变起始
      this.initial = nowIndex + 1;
    },
    goPrev() {
      let nowIndex = null;
      // 取当前展示的数组的最后一个数据，判断这个数据在原数组哪个索引下
      let nowFisishData = this.viewStepArr[this.viewStepArr.length - 1];
      this.stepList.forEach((e, i) => {
        if (e.name === nowFisishData.name) {
          nowIndex = i;
        }
      });
      // 根据当前展示数据的所反馈的索引，判断点击，刷新展示数据
      if (nowIndex <= 11) {
        this.initial = 0;
        this.viewStepArr = this.stepList.slice(0, 6);
      } else if (nowIndex > 11 && nowIndex <= 17) {
        this.initial = 6;
        this.viewStepArr = this.stepList.slice(6, 12);
      } else if (nowIndex > 17 && nowIndex <= 23) {
        this.initial = 12;
        this.viewStepArr = this.stepList.slice(12, 18);
      } else if (nowIndex > 23 && nowIndex <= 29) {
        this.initial = 18;
        this.viewStepArr = this.stepList.slice(18, 24);
      }
      this.isNextBtnShow = true;
    },
    // 将数组六等分
    // setSplitArr(arr, num) {
    //   this.viewStepArr = arr.slice(0, 6)
    // },
    // 过滤查找是否存在实际完成时间
    filterActualTime(arr) {
      let array = arr.filter((e,index) => {
        // if(e.actualEndTime){
        //   return index
        // }else{
        //   return 0
        // }
        return e.actualEndTime.length > 0;
      });
      // return array
      return array.length;
    },
    // 定位到当前步骤
    getNowStep(arr) {
      let isActual = arr.filter(e => {
        return e.actualEndTime.length > 0;
      });
      if (isActual.length <= 5) {
        this.initial = 0;
        this.viewStepArr = this.stepList.slice(0, 6);
        // 判断当前的数据长度
        if (this.stepList.length > 6) {
          this.isNextBtnShow = true;
        } else {
          this.isNextBtnShow = false;
        }
      } else if (isActual.length > 5 && isActual.length <= 11) {
        this.initial = 6;
        this.viewStepArr = this.stepList.slice(6, 12);
        // 判断当前的数据长度
        if (this.stepList.length > 12) {
          this.isNextBtnShow = true;
        } else {
          this.isNextBtnShow = false;
        }
      } else if (isActual.length > 11 && isActual.length <= 17) {
        this.initial = 12;
        this.viewStepArr = this.stepList.slice(12, 18);
        // 判断当前的数据长度
        if (this.stepList.length > 18) {
          this.isNextBtnShow = true;
        } else {
          this.isNextBtnShow = false;
        }
      } else if (isActual.length > 17 && isActual.length <= 23) {
        this.initial = 18;
        this.viewStepArr = this.stepList.slice(18, 24);
        // 判断当前的数据长度
        if (this.stepList.length > 24) {
          this.isNextBtnShow = true;
        } else {
          this.isNextBtnShow = false;
        }
      } else if (isActual.length > 23 && isActual.length <= 29) {
        this.initial = 24;
        this.viewStepArr = this.stepList.slice(24, 30);
        // 判断当前的数据长度
        if (this.stepList.length > 30) {
          this.isNextBtnShow = true;
        } else {
          this.isNextBtnShow = false;
        }
      }
    },
  }
};
</script>
<style lang="less" scoped>
.stepBar {
  display: flex;
  justify-content: flex-start;
  /deep/.ant-steps-horizontal:not(.ant-steps-label-vertical)
    .ant-steps-item-description {
    max-width: 150px;
  }
  /deep/
    .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title{
    color:  #666!important;
  }
  /deep/
    .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title {
    color:  #333!important;
    font-weight: 550;
  }
  /deep/
   .ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title{
    color: #999!important;
  }
  /deep/.ant-steps-small .ant-steps-item-title {
    font-size: 16px;
  }
  .goNext {
    width: 15px;
    height: 50px;
    color: #fff;
    padding: 5px 0px;
    background: #dadada;
    cursor: pointer;
  }
  .titleText{
    cursor: pointer;
    max-width: 150px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
  }
  .noPopTitle{
    max-width: 150px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
  }
  .redTime {
    /deep/.ant-steps-item-icon {
      border-color: red !important;
      border-radius: 50%;
    }
    /deep/ .anticon {
      color: red;
    }
    // /deep/ .ant-steps-item-icon {
    //   background-color: red;
    // }
    .overTime {
      color: red;
    }
    /deep/ .textIcon{
      background-color: red!important;
    }
    /deep/ .iconfont{
      color: red;
      font-size: 16px;
    }
    /deep/ .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after{
      background-color: red!important;
    }
  }
  /deep/.ant-steps-item-wait.redTime .ant-steps-item-icon > .ant-steps-icon{
    color: gray!important;
  }
  /deep/.ant-steps-item-wait.redTime .ant-steps-item-icon{
    border-color: gray !important;
  }
  /deep/.ant-steps-item-wait.redTime .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after{
      background-color: gray!important;
  }
  .greenTime {
    /deep/.ant-steps-item-icon {
      border-color: green !important;
      border-radius: 50%;
    }
    /deep/ .anticon {
      color: green;
    }
    // /deep/ .ant-steps-item-icon {
    //   background-color: green;
    // }
    .overTime {
      color: green;
    }
    /deep/ .textIcon{
      background-color: green!important;
    }
    /deep/ .iconfont{
      color: green;
      font-size: 16px;
    }
    /deep/ .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after{
      background-color: green!important;
    }
  }
   /deep/.ant-steps-item-wait.greenTime .ant-steps-item-icon > .ant-steps-icon{
    color: gray!important;
  }
  /deep/.ant-steps-item-wait.greenTime .ant-steps-item-icon{
    border-color: gray !important;
  }
  /deep/.ant-steps-item-wait.greenTime .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after{
      background-color: gray!important;
  }
  .yellowTime {
    /deep/.ant-steps-item-icon {
      border-color: orange !important;
      border-radius: 50%;
    }
    /deep/ .anticon {
      color: orange;
    }
    // /deep/ .ant-steps-item-icon {
    //   background-color: yellow;
    // }
    .overTime {
      color: orange;
    }
    /deep/ .textIcon{
      background-color: orange!important;
    }
    /deep/ .iconfont{
      color: orange;
      font-size: 16px;
    }
    /deep/ .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after{
      background-color: orange!important;
    }
  }
   /deep/.ant-steps-item-wait.yellowTime .ant-steps-item-icon > .ant-steps-icon{
    color: gray!important;
  }
  /deep/.ant-steps-item-wait.yellowTime .ant-steps-item-icon{
    border-color: gray !important;
  }
  /deep/.ant-steps-item-wait.yellowTime .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after{
      background-color: gray!important;
  }
  .grayTime {
    /deep/.ant-steps-item-icon {
      border-color: gray !important;
      border-radius: 50%;
    }
    /deep/ .anticon {
      color: gray;
    }
    // /deep/ .ant-steps-item-icon {
    //   background-color: gray; //1
    // }
    .overTime {
      color: gray;
    }
    /deep/ .textIcon{
      background-color: gray!important;
    }
    /deep/ .iconfont{
      color: gray;
      font-size: 16px;
    }
    /deep/ .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after{
      background-color: gray!important;
    }
  }
  /deep/.ant-steps-item-wait.grayTime .ant-steps-item-icon > .ant-steps-icon{
    color: gray!important;
  }
  /deep/.ant-steps-item-wait.grayTime .ant-steps-item-icon{
    border-color: gray !important;
  }
  /deep/.ant-steps-item-wait.grayTime .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after{
      background-color: gray!important;
  }
  /deep/ .ant-steps {
    .ant-steps-item-process {
      .ant-steps-item-container {
        .ant-steps-item-icon {
          .ant-steps-icon {
            color: #fff;
            font-size: 16px;
            .textIcon {
              display: inline-block;
              border-radius: 50%;
              width: 32px;
              height: 32px;
              background-color: #1890ff;
            }
          }
        }
      }
    }
  }
  /deep/ .ant-steps-small {
    .ant-steps-item-process {
      .ant-steps-item-container {
        .ant-steps-item-icon {
          .ant-steps-icon {
            color: #fff;
            font-size: 16px;
            .textIcon {
              display: inline-block;
              border-radius: 50%;
              width: 24px;
              height: 24px;
              background-color: #1890ff;
            }
          }
        }
      }
    }
  }
  /deep/ .ant-steps-item {
    // max-width: 280px;
    max-width: var(--max-width)
  }
}
</style>